<template>
  <el-form ref="form" :model="form" :rules="rules" class="client_type" label-width="35%" size="small" label-position="left">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">

            <div class="titlefirst">
              <i class="title_bar"></i>
              <span class="title_name">合同信息</span>
            </div>

        </template>
        <pcic-form
          ref="d2Crud"
          @validate="$emit('validate', $event)"
          class="whitebox"
          v-bind="_crudProps"
          v-on="_crudListeners"/>

      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="2">
        <template slot="title">
          <div class="flex items-center">
            <div class="titlefirst">
              <i class="title_bar"></i>
              <span class="title_name">种植地点</span>
            </div>

          </div>

        </template>
        <div style="padding: 15px 10px;">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              property="address"
              label="地址">
            </el-table-column>
          </el-table>
          <div class="text-right pr-2" style="margin-top: 0.5em;">
            共有1个地址
          </div>
        </div>


      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="3">
        <template slot="title">
          <div class="flex items-center">
            <div class="titlefirst">
              <i class="title_bar"></i>
              <span class="title_name">主险/附加险</span>
            </div>

          </div>

        </template>
        <total-table :data="tableData2"/>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="4">
        <template slot="title">
          <div class="flex items-center">
            <div class="titlefirst">
              <i class="title_bar"></i>
              <span class="title_name">币别信息</span>
            </div>

          </div>

        </template>
        <money-type-table :data="tableData3"/>

      </el-collapse-item>
    </el-collapse>
  </el-form>

</template>
<script>
import TotalTable from  './total-table'
import MoneyTypeTable from  './money-type-table'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
export default {
  mixins: [d2CrudPlus.crud],
  components:{
    TotalTable,
    MoneyTypeTable
  },
  data() {
    return {
      rules:{},
      tableData: [
        {
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      tableData2: [
        {
          no: '1',
          type1: '主险',
          type2: '苗木种植保险',
          type3: '苗木',
          item: '苗木',
          value1: 80000,
          value2: 20,
          value3: 16000,
        }
      ],
      tableData3: [
        {
          f1: '1',
          f2: '主险',
          f3: '苗木种植保险',
          f4: '苗木',
          f5: '苗木',
          f6: 80000,
          f7: 20,
          f8: 16000,
        }
      ],
      form: {
        mobile: ''
      },
      checkedCities: [],
      cities: ['投保人', '被保人'],
      activeNames: ['1', '2', '3', '4'],
      sv: '',
      sv2: '',
      radio1: ''
    }
  },
  methods:{
    doLoad(){

    },
    async doValidate(){
      return await this.$refs.d2Crud.doValidate()
    },

    getCrudOptions () {
      return crudOptions
    },
  }

}
</script>

